<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Katniss Premium Admin Template</title>
    <link rel="stylesheet" href="css/style.default.css" type="text/css"/>
    <link rel="stylesheet" href="prettify/prettify.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.uniform.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="prettify/prettify.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
</head>

<body>

<div class="mainwrapper">

<!-- START OF LEFT PANEL -->
<div class="leftpanel">

    <div class="logopanel">
        <h1><a href="dashboard.html">Katniss <span>v1.0</span></a></h1>
    </div>
    <!--logopanel-->

    <div class="datewidget">Today is Tuesday, Dec 25, 2012 5:30pm</div>

    <div class="searchwidget">
        <form action="results.html" method="post">
            <div class="input-append">
                <input type="text" class="span2 search-query" placeholder="Search here...">
                <button type="submit" class="btn"><span class="icon-search"></span></button>
            </div>
        </form>
    </div>
    <!--searchwidget-->

    <div class="plainwidget">
        <small>Using 16.8 GB of your 51.7 GB</small>
        <div class="progress progress-info">
            <div class="bar" style="width: 20%"></div>
        </div>
        <small><strong>38% full</strong></small>
    </div>
    <!--plainwidget-->

    <div class="leftmenu">
        <ul class="nav nav-tabs nav-stacked">
            <li class="nav-header">Main Navigation</li>
            <li><a href="dashboard.html"><span class="icon-align-justify"></span> Dashboard</a></li>
            <li><a href="media.html"><span class="icon-picture"></span> Media</a></li>
            <li class="dropdown"><a href=""><span class="icon-briefcase"></span> UI Elements &amp; Widgets</a>
                <ul>
                    <li><a href="elements.html">Theme Components</a></li>
                    <li><a href="bootstrap.html">Bootstrap Components</a></li>
                </ul>
            </li>
            <li class="active dropdown"><a href=""><span class="icon-th-list"></span> Tables</a>
                <ul style="display:block">
                    <li><a href="table-static.html">Static Table</a></li>
                    <li><a href="table-dynamic.html">Dynamic Table</a></li>
                </ul>
            </li>
            <li><a href="typography.html"><span class="icon-font"></span> Typography</a></li>
            <li><a href="charts.html"><span class="icon-signal"></span> Graph &amp; Charts</a></li>
            <li><a href="messages.html"><span class="icon-envelope"></span> Messages</a></li>
            <li><a href="buttons.html"><span class="icon-hand-up"></span> Buttons &amp; Icons</a></li>
            <li class="dropdown"><a href=""><span class="icon-pencil"></span> Forms</a>
                <ul>
                    <li><a href="forms.html">Form Styles</a></li>
                    <li><a href="wizards.html">Wizard Form</a></li>
                    <li><a href="wysiwyg.html">WYSIWYG</a></li>
                </ul>
            </li>
            <li><a href="calendar.html"><span class="icon-calendar"></span> Calendar</a></li>
            <li><a href="animations.html"><span class="icon-play"></span> Animations</a></li>
            <li class="dropdown"><a href=""><span class="icon-book"></span> Other Pages</a>
                <ul>
                    <li><a href="404.html">404 Error Page</a></li>
                    <li><a href="invoice.html">Invoice Page</a></li>
                    <li><a href="editprofile.html">Edit Profile</a></li>
                    <li><a href="grid.html">Grid Styles</a></li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li><a href="stickyheader.html">Sticky Header Page</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--leftmenu-->

</div>
<!--mainleft-->
<!-- END OF LEFT PANEL -->

<!-- START OF RIGHT PANEL -->
<div class="rightpanel">
<div class="headerpanel">
    <a href="" class="showmenu"></a>

    <div class="headerright">
        <div class="dropdown notification">
            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">
                <span class="iconsweets-globe iconsweets-white"></span>
            </a>
            <ul class="dropdown-menu">
                <li class="nav-header">Notifications</li>
                <li>
                    <a href="">
                        <strong>3 people viewed your profile</strong><br/>
                        <img src="img/thumbs/thumb1.png" alt=""/>
                        <img src="img/thumbs/thumb2.png" alt=""/>
                        <img src="img/thumbs/thumb3.png" alt=""/>
                    </a>
                </li>
                <li><a href=""><span class="icon-envelope"></span> New message from <strong>Jack</strong>
                    <small class="muted"> - 19 hours ago</small>
                </a></li>
                <li><a href=""><span class="icon-envelope"></span> New message from <strong>Daniel</strong>
                    <small class="muted"> - 2 days ago</small>
                </a></li>
                <li><a href=""><span class="icon-user"></span> <strong>Bruce</strong> is now following you
                    <small class="muted"> - 2 days ago</small>
                </a></li>
                <li class="viewmore"><a href="">View More Notifications</a></li>
            </ul>
        </div>
        <!--dropdown-->

        <div class="dropdown userinfo">
            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">Hi, ThemePixels! <b
                    class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="editprofile.html"><span class="icon-edit"></span> Edit Profile</a></li>
                <li class="divider"></li>
                <li><a href=""><span class="icon-wrench"></span> Account Settings</a></li>
                <li><a href=""><span class="icon-eye-open"></span> Privacy Settings</a></li>
                <li class="divider"></li>
                <li><a href="index.html"><span class="icon-off"></span> Sign Out</a></li>
            </ul>
        </div>
        <!--dropdown-->

    </div>
    <!--headerright-->

</div>
<!--headerpanel-->
<div class="breadcrumbwidget">
    <ul class="skins">
        <li><a href="default" class="skin-color default"></a></li>
        <li><a href="orange" class="skin-color orange"></a></li>
        <li><a href="dark" class="skin-color dark"></a></li>
        <li>&nbsp;</li>
        <li class="fixed"><a href="" class="skin-layout fixed"></a></li>
        <li class="wide"><a href="" class="skin-layout wide"></a></li>
    </ul>
    <!--skins-->
    <ul class="breadcrumb">
        <li><a href="dashboard.html">Home</a> <span class="divider">/</span></li>
        <li><a href="table-static.html">Tables</a> <span class="divider">/</span></li>
        <li class="active">Dynamic Table</li>
    </ul>
</div>
<!--breadcrumbs-->
<div class="pagetitle">
    <h1>Dynamic Table</h1> <span>This is a sample description for the page...</span>
</div>
<!--pagetitle-->

<div class="maincontent">
<div class="contentinner">

<h4 class="widgettitle">Dynamic Table</h4>
<table class="table table-bordered" id="dyntable">
<colgroup>
    <col class="con0" style="align: center; width: 4%"/>
    <col class="con1"/>
    <col class="con0"/>
    <col class="con1"/>
    <col class="con0"/>
    <col class="con1"/>
</colgroup>
<thead>
<tr>
    <th class="head0 nosort"><input type="checkbox" class="checkall"/></th>
    <th class="head0">Rendering engine</th>
    <th class="head1">Browser</th>
    <th class="head0">Platform(s)</th>
    <th class="head1">Engine version</th>
    <th class="head0">CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>Internet Explorer 4.0</td>
    <td>Win 95+</td>
    <td class="center">4</td>
    <td class="center">X</td>
</tr>
<tr class="gradeC">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>Internet Explorer 5.0</td>
    <td>Win 95+</td>
    <td class="center">5</td>
    <td class="center">C</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>Internet Explorer 5.5</td>
    <td>Win 95+</td>
    <td class="center">5.5</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>Internet Explorer 6</td>
    <td>Win 98+</td>
    <td class="center">6</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>Internet Explorer 7</td>
    <td>Win XP SP2+</td>
    <td class="center">7</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Trident</td>
    <td>AOL browser (AOL desktop)</td>
    <td>Win XP</td>
    <td class="center">6</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Firefox 1.0</td>
    <td>Win 98+ / OSX.2+</td>
    <td class="center">1.7</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td class="aligncenter"><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Firefox 1.5</td>
    <td>Win 98+ / OSX.2+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Firefox 2.0</td>
    <td>Win 98+ / OSX.2+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Firefox 3.0</td>
    <td>Win 2k+ / OSX.3+</td>
    <td class="center">1.9</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Camino 1.0</td>
    <td>OSX.2+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Camino 1.5</td>
    <td>OSX.3+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Netscape 7.2</td>
    <td>Win 95+ / Mac OS 8.6-9.2</td>
    <td class="center">1.7</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Netscape Browser 8</td>
    <td>Win 98SE+</td>
    <td class="center">1.7</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Netscape Navigator 9</td>
    <td>Win 98+ / OSX.2+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.0</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.1</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.1</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.2</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.2</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.3</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.3</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.4</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.4</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.5</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.5</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.6</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">1.6</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.7</td>
    <td>Win 98+ / OSX.1+</td>
    <td class="center">1.7</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Mozilla 1.8</td>
    <td>Win 98+ / OSX.1+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Seamonkey 1.1</td>
    <td>Win 98+ / OSX.2+</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Gecko</td>
    <td>Epiphany 2.20</td>
    <td>Gnome</td>
    <td class="center">1.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>Safari 1.2</td>
    <td>OSX.3</td>
    <td class="center">125.5</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>Safari 1.3</td>
    <td>OSX.3</td>
    <td class="center">312.8</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>Safari 2.0</td>
    <td>OSX.4+</td>
    <td class="center">419.3</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>Safari 3.0</td>
    <td>OSX.4+</td>
    <td class="center">522.1</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>OmniWeb 5.5</td>
    <td>OSX.4+</td>
    <td class="center">420</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>iPod Touch / iPhone</td>
    <td>iPod</td>
    <td class="center">420.1</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Webkit</td>
    <td>S60</td>
    <td>S60</td>
    <td class="center">413</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 7.0</td>
    <td>Win 95+ / OSX.1+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 7.5</td>
    <td>Win 95+ / OSX.2+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 8.0</td>
    <td>Win 95+ / OSX.2+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 8.5</td>
    <td>Win 95+ / OSX.2+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 9.0</td>
    <td>Win 95+ / OSX.3+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 9.2</td>
    <td>Win 88+ / OSX.3+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera 9.5</td>
    <td>Win 88+ / OSX.3+</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Opera for Wii</td>
    <td>Wii</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Nokia N800</td>
    <td>N800</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Presto</td>
    <td>Nintendo DS browser</td>
    <td>Nintendo DS</td>
    <td class="center">8.5</td>
    <td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>KHTML</td>
    <td>Konqureror 3.1</td>
    <td>KDE 3.1</td>
    <td class="center">3.1</td>
    <td class="center">C</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>KHTML</td>
    <td>Konqureror 3.3</td>
    <td>KDE 3.3</td>
    <td class="center">3.3</td>
    <td class="center">A</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>KHTML</td>
    <td>Konqureror 3.5</td>
    <td>KDE 3.5</td>
    <td class="center">3.5</td>
    <td class="center">A</td>
</tr>
<tr class="gradeX">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Tasman</td>
    <td>Internet Explorer 4.5</td>
    <td>Mac OS 8-9</td>
    <td class="center">-</td>
    <td class="center">X</td>
</tr>
<tr class="gradeC">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Tasman</td>
    <td>Internet Explorer 5.1</td>
    <td>Mac OS 7.6-9</td>
    <td class="center">1</td>
    <td class="center">C</td>
</tr>
<tr class="gradeC">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Tasman</td>
    <td>Internet Explorer 5.2</td>
    <td>Mac OS 8-X</td>
    <td class="center">1</td>
    <td class="center">C</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Misc</td>
    <td>NetFront 3.1</td>
    <td>Embedded devices</td>
    <td class="center">-</td>
    <td class="center">C</td>
</tr>
<tr class="gradeA">
    <td><span class="center">
                            <input type="checkbox"/>
                          </span></td>
    <td>Misc</td>
    <td>NetFront 3.4</td>
    <td>Embedded devices</td>
    <td class="center">-</td>
    <td class="center">A</td>
</tr>
</tbody>
</table>

<div class="divider15"></div>
                
                <pre class="prettyprint linenums">//Include this script in your document &lt;head&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;</pre>

<div class="divider15"></div>
                
                <pre class="prettyprint linenums">// dynamic table<br>jQuery('#dyntable').dataTable({
   &quot;sPaginationType&quot;: &quot;full_numbers&quot;,
   &quot;aaSortingFixed&quot;: [[0,'asc']],
   &quot;fnDrawCallback&quot;: function(oSettings) {
      jQuery.uniform.update();
   }<br>});<br></pre>

<div class="divider15"></div>

<pre class="prettyprint linenums">&lt;table class=&quot;table table-bordered&quot; id=&quot;dyntable&quot;&gt;</pre>


</div>
<!--contentinner-->
</div>
<!--maincontent-->

</div>
<!--mainright-->
<!-- END OF RIGHT PANEL -->

<div class="clearfix"></div>

<div class="footer">
    <div class="footerleft">Katniss Premium Admin Template v1.0</div>
    <div class="footerright">&copy; ThemePixels - <a href="http://twitter.com/themepixels">Follow me on Twitter</a> - <a
            href="http://dribbble.com/themepixels">Follow me on Dribbble</a></div>
</div>
<!--footer-->

</div>
<!--mainwrapper-->

</body>
</html>
